<template>

  <el-container class="login-one">
    <el-header></el-header>
    <el-main>

      <br> <br> <br> <br> <br>
      <el-row>
        <el-col :span="8">&nbsp;</el-col>
        <el-col :span="8" style="background-color: white;border-radius: 5%;height: 300px;">
          <br>
          <h3 align="center">{{loginForm.title}}</h3>

          <el-form ref="form"  label-width="80px">
            <br>
            <el-form-item :label="loginForm.accountName">
              <el-col :span="22">
                <el-input  :placeholder="loginForm.nameInfo" v-model="userInfo.name"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item :label="loginForm.pwd">
              <el-col :span="loginForm.num">
                <el-input :placeholder="loginForm.pwdInfo" v-model="userInfo.pwd"></el-input>
              </el-col>
              <el-col :span="11">
                <el-button type="success" round v-show="loginForm.ok" @click = "sendCode()">发送验证码</el-button>
              </el-col>

            </el-form-item>

            <el-form-item>
              <el-button type="success" round @click = "login()">登录</el-button>
              <el-button type="success" round>账号登录</el-button>
              <el-button type="success" round @click="emailLogin()">邮箱登录</el-button>
              <el-button type="success" round>短信登录</el-button>
            </el-form-item>

          </el-form>
        </el-col>
        <el-col :span="8">&nbsp;</el-col>
      </el-row>

    </el-main>
  </el-container>

</template>

<script>
  import myUtil from '../../utils/myUtil'

  export default {
    data(){
      return {
        loginForm:{
             title:"帐号登录",
             accountName:"用户名",
             pwd:"密码",
             nameInfo:"请输入用户名",
             pwdInfo:"请输入密码",
             ok:false,
             num:22
        },
        userInfo:{
          name:"",
          pwd:"",
        }
      }
    },
    methods:{
      login(){ // 登录
        var self = this;
        $.ajax({
          url: myUtil.url + "/user-info/redisLogin",
          type: "post",
          data: {
            "email":self.userInfo.name, // redis验证码需要
            "code":self.userInfo.pwd
          },
          dataType: "json",
          xhrFields: {withCredentials: true}, // 允许跨域请求携带 cookie值
          crossDomain: true,
          contentType: "application/x-www-form-urlencoded",
          success:function(data){
                alert(data.info);
                if(data.info == "邮箱登录成功"){
                  // 第一种本地存储
                  localStorage.setItem("userName", self.userInfo.name);
                  // sessionStorage.setItem("userName", self.userInfo.name);
                  self.$router.replace("/indexEle");
                }
          }
        })
      },
      sendCode(){ // 发送验证码
        var self = this;
        console.log(this.userInfo.name);
        $.ajax({
          url: myUtil.url + "/user-info/redisSend",
          type: "post",
          data: {"email":self.userInfo.name},
          dataType: "json",
          xhrFields: {withCredentials: true}, // 允许跨域请求携带 cookie值
          crossDomain: true,
          contentType: "application/x-www-form-urlencoded",
          success:function(data){
                alert(data.info);
          }
        })
      },
      emailLogin(){ // 切换邮箱登录
            this.loginForm.title = "邮箱登录";
            this.loginForm.accountName = "邮箱";
            this.loginForm.pwd = "验证码";
            this.loginForm.nameInfo = "请输入邮箱";
            this.loginForm.pwdInfo = "请输入验证码";
            this.loginForm.ok = true;
            this.loginForm.num = 11;
      },
      accountLogin(){ // 切换账号登录
            this.loginForm.title = "账号登录";
            this.loginForm.accountName = "用户名";
            this.loginForm.pwd = "密码";
            this.loginForm.nameInfo = "请输入用户名";
            this.loginForm.pwdInfo = "请输入密码";
            this.loginForm.ok = false;
            this.loginForm.num = 22;
      }
    }
  }
</script>

<style>

  html,body{
    height: 100%;
  }
  .login-one{
  		background-color:#1c77ac;
  		background-image:url(../../static/image/light.png);
  		background-repeat:no-repeat;
  	/*	//background-position:center top;*/
  		overflow:hidden;
  		height: 100%;
  	}
</style>
